<template>
  <div class="content-box">
    <Tabs :tabList="tabList" @target="target" />
    <!-- 专辑 -->
    <div v-if="modules === 'album'">
      <uni-list
        :subTitle="getSub"
        :subSize="subSize"
        :uniList="albumList"
        @goDetail="goDetail"
      >
        <template slot-scope="scope">
          <div class="font-12 my-name" style="color: #c3c3c4;">
            <span v-for="item in scope.artists" :key="item.id">
              {{ item.name }}
            </span>
          </div>
          <!-- 专辑歌曲总数 -->
          <div class="font-12" style="color: #c3c3c4;">
            {{ `${scope.size}首` }}
          </div>
        </template>
        <template #more>
          <LoadingMore :more="albumMore" @scrollMore="getsubAlbumList" />
        </template>
      </uni-list>
    </div>
    <!-- 歌手 -->
    <div v-else-if="modules === 'singer'">
      <uni-list
        :subTitle="getSub"
        :subSize="singerSize"
        :uniList="singerList" 
        @goDetail="goDetail"
      >
        <template slot-scope="scope">
          <div class="font-12" style="color: #c3c3c4;">
            {{ `专辑：${scope.albumSize}` }}
          </div>
          <!-- 专辑歌曲总数 -->
          <div class="font-12" style="color: #c3c3c4;">
            {{ `MV：${scope.mvSize}` }}
          </div>
        </template>
        <template #more>
          <LoadingMore :more="false" />
        </template>
      </uni-list>
    </div>
    <!-- MV -->
    <div v-else-if="modules === 'video'">
      <mv-list
        v-for="item in mvList"
        :key="item.vid"
        :playcount="item.playTime"
        :cover="item.coverUrl"
        :videoAuthor="item.creator"
        :videoTitle="item.title"
        :durationms="item.durationms"
        @goDetail="event => goVDetail(event, item.vid)"
      >
      </mv-list>
    </div>
  </div>
</template>

<script>
import { subAlbumList, subList, subMvList } from '@/api/detail';
import Tabs from '@/components/Content/Tabs';
import UniList from '@/components/Content/UniList';
import MvList from '@/components/Content/MvList';
import LoadingMore from '@/components/Library/LoadingMore';

export default {
  name: 'myFavorite',

  components: {
    Tabs,
    UniList,
    MvList,
    LoadingMore
  },

  data() {
    return {
      tabList: [{
        tabName: '专辑',
        isActive: true,
        id: 'album'
      }, {
        tabName: '歌手',
        isActive: false,
        id: 'singer'
      }, {
        tabName: '视频',
        isActive: false,
        id: 'video'
      }],
      // 判断显示哪个模块
      modules: 'album',
      // 收藏专辑参数
      subparams: {
        limit: 20,
        offset: 0,
        timestamp: new Date().getTime()
      },
      subNum: 0,
      // 收藏数量
      subSize: 0,
      // 专辑列表
      albumList: [],
      albumMore: true,
      // 歌手列表
      singerList: [],
      singerMore: true,
      singerSize: 0,
      // Mv列表
      mvList: [],
      mvMore: true,
      mvSize: 0
    };
  },

  created() {
    this.getsubAlbumList();
  },

  computed: {
    getSub() {
      if (this.modules === 'album') {
        return '收藏的专辑';
      } else if (this.modules === 'singer') {
        return '收藏的歌手';
      } else {
        return '收藏的视频';
      }
    }
  },

  methods: {
    // 获取收藏专辑列表
    async getsubAlbumList() {
      this.subparams.offset = this.subNum++ * this.subparams.limit;
      const res = (await subAlbumList(this.subparams)).data;
      console.log(res);
      this.albumList.push(...res.data);
      this.albumMore = res.hasMore;
      this.subSize = res.count;
    },
    // 获取收藏歌手列表
    async getSubList() {
      const res = (await subList()).data;
      this.singerList = Object.freeze(res.data);
      this.singerMore = res.hasMore;
      this.singerSize = res.count;
    },
    // 获取收藏MV列表
    async getSubMvList() {
      const res = (await subMvList()).data;
      this.mvList = Object.freeze(res.data);
      this.mvMore = res.hasMore;
      this.mvSize = res.count;
    },
    // 跳转至详情页
    goDetail(id) {
      const rObj = {
        name: 'artistdetail',
        query: { id }
      }
      if (this.modules === 'singer') {
        this.$router.push(rObj);
        return;
      }

      rObj.name = 'albumdetail';
      this.$router.push(rObj);
      // }
    },
    // 跳转至MV详情页
    target(name) {
      this.modules = name;
      switch(name) {
        case 'singer':
          this.getSubList();
          break;
        case 'video':
          this.getSubMvList();
          break;
        default:
      }
    }
  },
};
</script>

<style lang="less" scoped>
.content-box {
  height: 100%;
  .my-name>span::after {
    content: '/';
    display: inline-block;
  }
  .my-name>span:last-child::after {
    display: none;
  }
}
/deep/ul.tab-list {
  margin-left: 0 !important;
}
</style>